<!doctype html>
<html>
<!-- Last updated:2020/02/17 -->
<head>
  <title>m3u8FlaskDown - m3u8FlaskDown.html</title>
  <meta charset="UTF-8">
  <meta name="Author" content="setycyas">
  <link rel="stylesheet" href="/static/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="/static/common_style.css" type="text/css" />
  <!--common_style.css是自定义的基本模板页css,每个应用还应该自定义一个css-->
  <script src="/static/jquery.min.js"></script>
  <!--<script src="bootstrap.min.js"></script>-->
  <script src="/static/poster.js"></script>
  <script>
    
    var downPoster = new SimplePoster(
      'm3u8FlaskDown',
      'm3u8downPost',
      (respData) => {
        $('#postRespon').html(respData['result']);
      }
    );
    
    var downThreadObserver = new ThreadObserver(
      'm3u8FlaskDown',
      'm3u8Thread',
      1000,
      (status) => {
        $('#threadStatus').html(status['status']['msg'])
      },
      (status) => {
        $('#threadStatus').html(status['result']);
      }
    );
    
    function downBtnClick(){
      // 制作上传到后段的数据
      m3u8 = $('#m3u8').val()
      downpath = $('#downpath').val().trim();
      if (downpath.substring(downpath.length-1) != '\\'){
        downpath += '\\';
      }
      downfile = $('#downfile').val().trim();
      downfile = downfile.replace(' ', '_');
      if (downfile.indexOf('.') < 0){
        downfile += '.mp4'
      }
      
      data = {
        'm3u8': m3u8,
        'target': downpath+downfile
      };
      // 下之前确认
      if(!confirm('确定要下载'+data['m3u8']+'到'+data['target']+'?')){
          return;
      }
      /* post下载命令,开启线程监视器 */
      downPoster.post(data);
      downThreadObserver.start();
    }
    
    
  </script>
</head>

<body><div class="container">

  <h2>m3u8FlaskDown</h2>
  <label class="control-label">这里输入m3u8链接:</label>
  <input type="text" id="m3u8" class='form-control' 
    style= 'width:200px;border:1px solid green' placeholder=".m3u8" />
  <label class="control-label">这里输入下载目录:</label>
  <input type="text" id="downpath" class='form-control' 
    style='width:200px;border:1px solid green' 
    placeholder="例如: D:\\vedio\" />
  <label class="control-label">这里输入下载文件名:</label>
  <input type="text" id="downfile" class='form-control' 
    style='width:200px;border:1px solid green' 
    placeholder="例如: 1.mp4" />
  <br/>
  <input id="downBtn" class='btn btn-primary' type="button" value="下载" 
    onclick="downBtnClick();" /><br/>
  <label id="postRespon" class="control-label"></label><br/>
  <label id="threadStatus" class="control-label"></label><br/>

</div></body>

</html>